<template>
	<view class="container">
		<cz-nav :offSet="scrollNum" :isCollection="bookInfo.isCollection" :height="navHeight" backgroundColor="#ffffff">
		</cz-nav>

		<view class="mainScrollView">
			<view class="content-wrapper">
				<!-- 书籍封面区域 -->
				<view class="book-header-section">
					<view class="header-image-background" :style="{'background-image':'url('+ bookInfo.bookIconUrl +')'}"></view>
					<view class="header-overlay">
						<view class="book-info-container">
							<view class="book-info-main">
								<view class="book-cover-wrapper">
									<image class="book-cover" :src="bookInfo.bookIconUrl" lazy-load></image>
								</view>
								<view class="book-meta-info">
									<view class="book-name-wrapper">
										<label class="book-name">{{bookInfo.bookName}}</label>
									</view>
									<view class="book-author-wrapper">
										<label class="book-meta-label">{{$t('bookInfoDetail.author')}}{{bookInfo.author}}</label>
									</view>
									<view class="book-type-wrapper">
										<label class="book-meta-label">{{$t('bookInfoDetail.type')}}{{bookInfo.cateName}}</label>
									</view>
									<view class="book-status-wrapper">
										<label v-if="bookInfo.status == 1" class="book-meta-label">{{$t('bookInfoDetail.status')}}{{$t('bookInfoDetail.completed')}}</label>
										<label v-if="bookInfo.status == 2" class="book-meta-label">{{$t('bookInfoDetail.status')}}{{$t('bookInfoDetail.ongoing')}}</label>
									</view>
								</view>
							</view>
						</view>

						<!-- 操作按钮区域 -->
						<view class="action-buttons">
							<view class="action-btn-group">
								<view class="action-btn" @click="handleRecommend">
									<uni-icons type="starhalf" size="14" color="#1AAD19" class="action-btn-icon"></uni-icons>
									<span class="action-btn-text">{{$t('bookInfoDetail.recommend')}}</span>
								</view>
								<view class="action-btn" @click="handleShare">
									<uni-icons type="paperplane" size="14" color="#1AAD19" class="action-btn-icon"></uni-icons>
									<span class="action-btn-text">{{$t('bookInfoDetail.share')}}</span>
								</view>
								<view class="action-btn" @click="handleReport">
									<uni-icons type="help" size="14" color="#1AAD19" class="action-btn-icon"></uni-icons>
									<span class="action-btn-text">{{$t('bookInfoDetail.report')}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 简介区域 -->
				<view class="info-section">
					<uni-section :title="$t('bookInfoDetail.intro')" type="line" class="section-title"></uni-section>
					<view class="intro-content">
						<view class="text-box">
							{{bookInfo.intro}}
						</view>
					</view>
				</view>

				<!-- 目录区域 -->
				<view class="info-section">
					<uni-section :title="$t('bookInfoDetail.catalog')" type="line" class="section-title"></uni-section>
					<view class="catalog-container">
						<uni-list class="chapter-list">
							<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon"
								:title="bookInfo.lastChapterName" :note="bookInfo.lastTimeStr"
								class="chapter-item" clickable @click="enterReadDetailInfoClick"
								link />
						</uni-list>
					</view>
				</view>

				<!-- 同类推荐区域 -->
				<view v-if="bookList.length>0" class="info-section similar-section">
					<uni-section :title="$t('bookInfoDetail.similar')" type="line" class="section-title similar-title">
						<view class="change-batch-btn" @click="getSimilarBook">
							<uni-icons type="reload" size="15" color="#888" class="change-batch-icon"></uni-icons>
							<span class="change-batch-text">{{$t('bookInfoDetail.changeBatch')}}</span>
						</view>
					</uni-section>
					<view class="similar-books-container">
						<view class="similar-books-grid">
							<view v-for="(item,index) in randomBooks" class="similar-book-item" @click="enterBookInfoDetail(item)">
								<view class="similar-book-cover">
									<image class="similar-book-img" :src="item.bookIconUrl" lazy-load></image>
								</view>
								<view class="similar-book-name">
									<span class="similar-book-title">{{item.bookName}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 底部安全区域 -->
				<view v-if="bookList.length>0" class="bottom-space" :style="{height:bottomSafeAreaHeight + 45 + 'px'}"></view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-action-bar" :style="{height:bottomSafeAreaHeight + 45 + 'px'}">
			<view class="bottom-buttons">
				<view v-if="bookInfo.isCollection == false" class="add-bookshelf-btn" @click="collectionBookInfoClick">
					<span class="add-btn-text">{{$t('bookInfoDetail.addToBookshelf')}}</span>	
				</view>
				<view v-if="bookInfo.isCollection == true" class="add-bookshelf-btn" style="background-color:orangered;" @click="removeBookInfoClick">
					<span class="added-btn-text" style="color: white;">{{$t('bookInfoDetail.removeToBookshelf')}}</span>
				</view>
				<view class="start-reading-btn" @click="startReadBookInfo">
					<span class="read-btn-text">{{$t('bookInfoDetail.startReading')}}</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import czNav from '../../../components/cz-nav/cz-nav.vue'
	import data from './data.js'
	import methods from './methods.js'
	import uniSection from "../../../components/uni-section/uni-section.vue"
	export default {

		data() {
			return data.init(this)
		},
		components: {
			czNav,
			uniSection
		},
		async onLoad(options) {
			
			let that = this;

			this.bookInfo = JSON.parse(options.bookInfo);
			this.bookInfo.lastTimeStr = "最后更新： " + this.bookInfo.lastTime

			var dataRes = await this.$sqlDBConfig.selectCollectionTableData2();
			dataRes.forEach(function(item, index) {
				if (item.bookcode == that.bookInfo.bookCode) {
					that.bookInfo.isCollection = true
				}
			})

		},
		onPageScroll(e) {
			//.scrollTop就是距离滑动了多少距离
			this.scrollNum = e.scrollTop
		},
		created() {

			// 获取阅读的数据
			this.$sqlDBConfig.getInforAboutBooksInYourRead();
		},
		mounted() {
			
			let that = this;

			that.navHeight = 44;
			that.deviceInfoRes = uni.getSystemInfoSync();
			that.bottomSafeAreaHeight = that.deviceInfoRes.screenHeight - that.deviceInfoRes.safeArea.bottom;
			that.getListOfClassifiedData();
			
			
			uni.$on('switchSectionDetail', async (data) => {
				//获取之前看的记录
				var bookInfoStr = JSON.stringify(this.bookInfo);
				uni.navigateTo({
					url: '/pages/baseBusiness/readDetail/readDetailView?bookInfo=' + bookInfoStr
				})
			})

		},
		methods: methods

	}
</script>

<style scoped lang="scss">
	/* 基础容器样式 */
	.container {
		width: 100vw;
		height: 100vh;
	}

	/* 滚动视图样式 */
	.mainScrollView {
		width: 100%;
		height: calc(100vh - var(--status-bar-height) - 16px - var(--window-bottom));
		background-color: #f0f0f0;
	}

	.content-wrapper {
		height: auto;
	}

	/* 书籍封面区域样式 */
	.book-header-section {
		position: relative;
		width: 100%;
		height: 240px;
	}

	.header-image-background {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #ffffff;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100% calc(100% - 37px);
		-webkit-filter: blur(40px);
		filter: blur(40px);
	}

	.header-overlay {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.book-info-container {
		position: absolute;
		width: 100%;
		height: calc(100% - 37px);
	}

	.book-info-main {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: calc(100% - 60px);
		height: 150px;
		margin-top: 60px;
		margin-left: 30px;
	}

	.book-cover-wrapper {
		width: 100px;
		height: 120px;
	}

	.book-cover {
		width: 100%;
		height: 100%;
	}

	.book-meta-info {
		display: flex;
		flex-direction: column;
		width: calc(100% - 110px);
		height: 120px;
		margin-left: 10px;
	}

	.book-name-wrapper {
		height: 25px;
		width: 100%;
	}

	.book-name {
		font-size: 18px;
		color: #fff;
	}

	.book-author-wrapper,
	.book-type-wrapper,
	.book-status-wrapper {
		height: 20px;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.book-author-wrapper {
		margin-top: 6px;
	}

	.book-meta-label {
		font-size: 12px;
		color: #fff;
	}

	/* 操作按钮样式 */
	.action-buttons {
		position: absolute;
		height: 37px;
		width: 100%;
		bottom: 0px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.action-btn-group {
		display: flex;
		align-items: center;
		flex-direction: row;
		width: calc(100% - 30px);
		height: 17px;
	}

	.action-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(100% / 3);
		height: 100%;
		border-right: 1px solid #888;
	}

	.action-btn:last-child {
		border-right: 0px solid #888;
	}

	.action-btn-icon {
		margin-right: 6px;
	}

	.action-btn-text {
		color: #1AAD19;
		font-size: 12px;
	}

	/* 信息区块通用样式 */
	.info-section {
		position: relative;
		width: 100%;
		height: auto;
		margin-top: 7px;
		background-color: #ffffff;
	}

	/* 区块标题样式 */
	.section-title {
		text-align: left;
		width: calc(100% - 20px);
		margin-top: 0px;
		height: 40px;
	}

	/* 简介区域样式 */
	.intro-content {
		height: auto;
		width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.text-box {
		width: calc(100% - 30px);
		height: 100%;
		background-color: #ffffff;
		color: #888;
		font-size: 14px;
		margin-left: 20px;
	}

	/* 目录区域样式 */
	.catalog-container {
		height: 54px;
		width: 100%;
		background-color: #ffffff;
	}

	.chapter-list {
		width: 100%;
		height: 100%;
	}

	.chapter-item {
		background: #fff;
		height: 100%;
	}

	/* 同类推荐区域样式 */
	.similar-section {
		height: 225px;
	}

	.similar-title {
		font-weight: bold;
	}

	.change-batch-btn {
		display: flex;
		align-items: center;
		color: #888;
		font-size: 12px;
	}

	.change-batch-icon {
		margin-right: 6px;
	}

	.similar-books-container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: calc(100% - 40px);
		width: 100%;
	}

	.similar-books-grid {
		display: flex;
		flex-direction: row;
		width: calc(100% - 30px);
		height: calc(100% - 20px);
	}

	.similar-book-item {
		display: flex;
		flex-direction: column;
		width: calc(100% / 3);
		height: 100%;
	}

	.similar-book-cover {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80%;
		width: 100%;
	}

	.similar-book-img {
		width: calc(100% - 15px);
		height: calc(100% - 10px);
	}

	.similar-book-name {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 20%;
		width: 100%;
	}

	.similar-book-title {
		font-size: 14px;
		color: #888;
	}

	/* 底部安全区域 */
	.bottom-space {
		height: 45px;
	}

	/* 底部操作栏样式 */
	.bottom-action-bar {
		position: fixed;
		bottom: 0px;
		width: 100%;
		background-color: #ffffff;
	}

	.bottom-buttons {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 45px;
		width: 100%;
	}

	.add-bookshelf-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(50% - 30px);
		height: 40px;
		background-color: #e4e7ed;
		border-radius: 23px;
		margin-top: 10px;
		margin-left: 20px;
	}

	.add-btn-text {
		color: #15a2fa;
		line-height: 45px;
		font-size: 14px;
	}

	.added-btn-text {
		color: #888;
		line-height: 45px;
		font-size: 14px;
	}

	.start-reading-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(50% - 30px);
		margin-right: 20px;
		height: 40px;
		background-color: #00adf9;
		border-radius: 20px;
		margin-top: 10px;
		
	}

	.read-btn-text {
		color: #fff;
		line-height: 45px;
		font-size: 14px;
	}

	/* 滚动条样式 */
	::v-deep(::-webkit-scrollbar) {
		width: 0 !important;
		height: 0;
	}

	/* 去除列表顶部边框 */
	::v-deep(.uni-list--border-top) {
		height: 0px !important;
		background-color: #e5e5e5;
	}
</style>